<!--
 * @Author: your name
 * @Date: 2022-04-17 15:08:17
 * @LastEditTime: 2022-04-17 15:38:50
 * @LastEditors: your name
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \drivingApp\driving-app\src\views\user\index.vue
-->
<template>
  <div class="container">
    <div class="content">
      <div class="button_box">
        <el-button type="primary" @click="addHandel">新增用户</el-button>
      </div>
      <div class="table">
        <el-table
          :data="userList"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
          >
          <el-table-column
            prop="username"
            label="用户名"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="nickname"
            label="昵称"
            align="center"
            width="180">
          </el-table-column>
          <el-table-column
            prop="avatar"
            label="头像"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="number"
            label="电话号码"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="role"
            label="用户角色"
            align="center"
            sortable
            >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="创建时间"
            align="center"
            >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
            align="center"
            >
          </el-table-column>
          <el-table-column width="120" align="center" label="操作">
            <template slot-scope="scope">
              <el-button
              type="text"
                @click="handleEdit(scope.row)">编辑</el-button>
              <el-button
                type="text"
                @click="handleDelete(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-row>
          <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
            <el-form-item label="用户名">
              <el-input v-model="form.username" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :sm="10" :push="2" :md="10" :lg="10" :xl="10">
            <el-form-item label="昵称">
              <el-input v-model="form.nickname" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="10" :sm="10" :md="10" :lg="10" :xl="10">
            <el-form-item label="电话号码">
              <el-input v-model="form.number" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="10" :sm="10" :push="2" :md="10" :lg="10" :xl="10">
            <el-form-item label="用户角色">
              <el-select v-model="form.role" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="15">
            <el-form-item label="密码">
              <el-input v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="15" :sm="15" :md="15" :lg="15" :xl="15">
            <el-form-item label="头像">
              <el-input v-model="form.avatar" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelHandel">取 消</el-button>
        <el-button v-if="title === '编辑用户'" type="primary" @click="updateUser">修 改</el-button>
        <el-button v-if="title === '新增用户'" type="primary" @click="addUser">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createUser, getAllUser,deleteUser,updateUser} from '@/api/user'
export default {
  data() {
    return {
      title:"",
      dialogFormVisible:false,
      form: {
       username:"",
       nickname:"",
       password:"",
       avatar:"",
       number:"",
       role:""
      },
      userList:[],
      pageSize:10,
      pageNum:1,
      pageTotal:0,
      options:[
        {value:"admin",label:"管理人员"},
        {value:"coach",label:"教练员"},
        {value:"trainees",label:"学员"},
      ]
    }
  },
  mounted(){
    this.getAllUser(1)
  },
  methods: {
    handleEdit(row){
       this.title = "编辑用户"
      let {createTime,updateTime,...form} = row
      this.form = form
      this.dialogFormVisible = true
    },
    addHandel(){
      this.title = "新增用户"
      this.form = {
       username:"",
       nickname:"",
       password:"",
       avatar:"",
       number:"",
       role:""
      }
      this.dialogFormVisible = true
    },
    addUser(){
      if(this.form.username){
        createUser(this.form).then(res => {
          if(res.code === 0){
            this.$message.success('success')
            this.getAllUser(this.pageNum)
            this.dialogFormVisible = false
          }else{
            this.$message.error('error')
          }
        })
      }else{
            this.$message.error('error')
          }
    },
    handleDelete(row){
      deleteUser(row.id).then(res => {
        if(res.code === 0){
          this.$message.success('success')
          this.getAllUser(this.pageNum)
        }else{
          this.$message.error('error')
        }
      })
    },
    getAllUser(value){
      let requestBody = {
        pageSize:this.pageSize,
        pageNum:value
      }
      getAllUser(requestBody).then(res => {
        if(res.code === 0){
          this.userList = res.data.list
          this.pageNum = value
          this.pageTotal = res.data.Total
        }else{
          this.$message.error('error')
        }
      })
    },
    cancelHandel(){
      this.dialogFormVisible = false
      this.form = {
       username:"",
       nickname:"",
       password:"",
       avatar:"",
       number:"",
       role:""
      }
    },
    updateUser(){
      updateUser(this.form).then(res => {
        if(res.code === 0){
          this.$message.success('success')
          this.dialogFormVisible = false
        }else{
          this.$message.error('error')
          this.dialogFormVisible = false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog{
  .el-form-item{
    .el-input{
      width: 70%;
    }
  }
}
</style>

